<script setup lang="ts">
import {defineProps, defineEmits} from "vue";
import {TRequest} from "~/utils/ali/PCRequest";

const props = defineProps({
  item: {
    type: Object as PropType<ItemInterface>,
    default: () => {
      return {}
    }
  },
  visible: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["close"]);
const curr = ref('0');
const tags = ref([
  {
    keyword: "全部",
    propertyId: "0",
  }
]);
const loadAskTag = () => {
  let itemId = props.item.itemId();
  TRequest.ugcAskTags(itemId).then(res => {
    if (res) {
      tags.value.push(...res.list);
      loadQuestion();
    }
  });
};
const questions = ref([]);
const loadQuestion = () => {
  let itemId = props.item.itemId();
  let propertyId = curr.value;
  questions.value = [];
  TRequest.socialFeedAggregate(itemId).then(res => {
    if (res) {
      // console.log(res);
      res.list.map(e => {
        e.map(l => {
          l.subFeeds.map(f => {
            let data = {
              ...l
            };
            delete data.subFeeds;
            data.loaded = false;
            data.feed = f;
            questions.value.push(data);
          })
        });
      })
    } else {
      setTimeout(() => {
        loadQuestion();
      }, 5000);
    }
  });
};
const data = ref([]);
const calcData = () => {
  data.value = questions.value.filter(e => {
    // 获取keyword
    let tag = tags.value.find(e => e.propertyId == curr.value);
    // console.log(tag.keyword);
    return curr.value == '0' || e.title.indexOf(tag.keyword)>-1 || e.feed.title.indexOf(tag.keyword)>-1
  })
}
watch(() => curr.value, (val) => {
  calcData();
});
watch(() => questions.value, (val) => {
  calcData();
}, {deep: true});
watch(() => props.visible, (val) => {
  if (val) {
    tags.value = [
      {
        keyword: "全部",
        propertyId: "0",
      }
    ];
    loadAskTag();
  }
});
const columns = [
  {
    title: '昵称',
    width: 100,
    dataIndex: 'feed.user.userNick',
  },
  {
    title: '提问时间',
    dataType: 'time',
    dataIndex: 'gmtCreate',
    sorter: (a, b) => {
      return a.gmtCreate - b.gmtCreate;
    }
  },
  {
    title: '问题',
    dataIndex: 'title',
  },
  {
    title: '回答时间',
    dataType: 'time',
    dataIndex: 'feed.gmtCreate',
    sorter: (a, b) => {
      return a.feed.gmtCreate - b.feed.gmtCreate;
    }
  },
  {
    title: '回答',
    dataIndex: 'feed.title',
  },
]
</script>

<template>
  <a-modal :visible="visible" style="top: 20px;" width="95%" :title="'问大家分析-'+item.itemName()" :footer="null"
           @cancel="emit('close')"
  >
    <a-row :gutter="10">
      <a-col v-for="(tag,index) in tags" :key="index">
        <a-button :type="curr==tag.propertyId?'primary':'default'" size="small" @click="curr=tag.propertyId">
          {{ tag.keyword }}
        </a-button>
      </a-col>
    </a-row>
    <base-table :title="'问大家分析-'+item.itemName()" :scroll="{
      y:700
    }" size="small" :columns="columns" :data-source="data"
    >

    </base-table>
  </a-modal>
</template>

<style scoped>

</style>
